<template>
  <div class="sound-recording-container">
    <!-- 语音配置区域 -->
    <div class="config-section">
      <div class="config-card">
        <div class="card-header">
          <Icon icon="ep:setting" class="header-icon" />
          <span class="card-title">语音配置</span>
        </div>

        <el-form ref="form" :model="formData" label-width="140px" class="config-form">
          <div class="form-row">
            <el-form-item label="录音模式" class="form-item">
              <el-radio-group v-model="formData.mode" class="radio-group">
                <el-radio label="polyphonic" class="radio-item">
                  <div class="radio-content">
                    <Icon icon="ep:microphone" class="radio-icon" />
                    <span>合成音</span>
                  </div>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="form-row">
            <el-form-item label="合成音" class="form-item">
              <div class="voice-config">
                <el-select
                  v-model="formData.voiceType"
                  placeholder="请选择合成音"
                  @change="setType"
                  class="voice-select"
                >
                  <el-option
                    :label="item.timbreName"
                    v-for="item in timbreList"
                    :key="item.id"
                    :value="item.timbreId"
                  />
                </el-select>

                <div class="voice-controls">
                  <span class="control-label">试听:</span>
                  <el-button
                    type="primary"
                    @click="trial_listening"
                    :disabled="loading"
                    v-if="!isStart"
                    class="control-btn play-btn"
                  >
                    <Icon icon="ep:video-play" />
                  </el-button>
                  <el-button
                    type="warning"
                    @click="stop_listening"
                    :disabled="loading"
                    v-else
                    class="control-btn pause-btn"
                  >
                    <Icon icon="ep:video-pause" />
                  </el-button>
                  <span class="voice-text">{{ formData.content }}</span>
                </div>
              </div>
            </el-form-item>
          </div>

          <!-- 音频参数调节 -->
          <div class="params-section" v-if="formData.timbreType == 1">
            <div class="params-grid">
              <el-form-item label="音量调节(0~100)" class="param-item">
                <el-input-number
                  v-model="formData.volume"
                  :min="0"
                  :max="100"
                  class="param-input"
                />
              </el-form-item>

              <el-form-item label="语速调节(0~100)" class="param-item">
                <el-input-number v-model="formData.speed" :min="0" :max="100" class="param-input" />
              </el-form-item>

              <el-form-item label="语调调节(0~100)" class="param-item">
                <el-input-number v-model="formData.pitch" :min="0" :max="100" class="param-input" />
              </el-form-item>
            </div>
          </div>

          <div class="params-section" v-if="formData.timbreType == 2">
            <div class="params-grid">
              <el-form-item label="音量调节(-50~100)" class="param-item">
                <el-input-number
                  v-model="formData.volume"
                  :step="1"
                  :min="-50"
                  :max="100"
                  class="param-input"
                />
              </el-form-item>

              <el-form-item label="语速调节(-50~100)" class="param-item">
                <el-input-number
                  v-model="formData.speed"
                  :step="1"
                  :min="-50"
                  :max="100"
                  class="param-input"
                />
              </el-form-item>
            </div>
          </div>

          <div class="action-buttons">
            <el-button
              type="success"
              @click="synthesis"
              :disabled="loading_btn"
              class="action-btn synthesis-btn"
            >
              <Icon icon="ep:magic-stick" class="btn-icon" />
              合成
            </el-button>
            <el-button
              type="primary"
              :disabled="loading_ing || !updateId"
              @click="submit"
              class="action-btn save-btn !ml-0"
            >
              <Icon icon="ep:check" class="btn-icon" />
              保存
            </el-button>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 标签页区域 -->
    <div class="tabs-section">
      <el-tabs v-model="activeName" class="recording-tabs" @tab-click="handleClick">
        <el-tab-pane name="1">
          <template #label>
            <div class="tab-label">
              <Icon icon="ep:connection" class="tab-icon" />
              <span>流程节点</span>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="2">
          <template #label>
            <div class="tab-label">
              <Icon icon="ep:document" class="tab-icon" />
              <span>知识节点</span>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 操作提示和按钮 -->
    <div class="operation-bar">
      <div class="operation-tip">
        <Icon icon="ep:info-filled" class="tip-icon" />
        <span class="tip-text">话术内容双击进行编辑</span>
      </div>
      <div class="operation-actions">
        <el-button type="danger" @click="clearAll" v-if="activeName == '1'" class="clear-btn">
          <Icon icon="ep:delete" class="btn-icon" />
          清除全部录音
        </el-button>
        <el-button type="danger" @click="clearAll2" v-else class="clear-btn">
          <Icon icon="ep:delete" class="btn-icon" />
          清除全部录音
        </el-button>
      </div>
    </div>

    <!-- 流程节点表格 -->
    <div class="table-section" v-if="activeName == '1'">
      <el-table
        :data="nodes_value"
        class="recording-table"
        v-loading="loading_btn"
        empty-text="暂无流程节点数据"
      >
        <el-table-column
          prop="name"
          label="节点名称"
          width="120px"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div class="node-name">
              <Icon icon="ep:connection" class="node-icon" />
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="content" label="话术内容" show-overflow-tooltip>
          <template #default="scope">
            <div class="content-cell">
              <AudioPlayered
                :url="scope.row.filePath"
                ref="audioPlays"
                v-if="scope.row.isVoice == 1"
                class="audio-player"
              />
              <div
                v-if="!scope.row.editing"
                @dblclick="handleCellDblClick(scope)"
                class="content-display"
              >
                <Icon icon="ep:edit-pen" class="edit-hint" />
                <span class="content-text">{{ scope.row.content }}</span>
              </div>
              <el-input
                v-else
                v-model="scope.row.content"
                @keyup.enter="handleCellEnter(scope)"
                @blur="handleCellBlur(scope)"
                ref="inputRef"
                class="content-input"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px" align="center">
          <template #default="scope">
            <div class="table-actions">
              <el-upload
                :show-file-list="false"
                :multiple="false"
                ref="uploadRef"
                class="upload-component"
                accept="audio/*,.wav,.mp3,.m4a"
                :auto-upload="false"
                :on-change="(file, fileList) => handlePreview(file, fileList, scope.row.id)"
                :limit="1"
              >
                <template #trigger>
                  <el-button type="primary" size="small" class="upload-btn">
                    <Icon icon="ep:upload" class="btn-icon" />
                    上传语音
                  </el-button>
                </template>
              </el-upload>

              <el-button
                type="success"
                :disabled="loading0"
                text
                @click="synthesis_audio(scope)"
                class="synthesis-link"
              >
                <Icon icon="ep:magic-stick" class="btn-icon" />
                合成音
              </el-button>

              <el-button type="danger" text @click="del_audio(scope.row)" class="delete-link">
                <Icon icon="ep:delete" class="btn-icon" />
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 知识节点表格 -->
    <div class="table-section" v-else>
      <el-table
        :data="nodes_value"
        v-loading="loading_btn"
        class="recording-table"
        empty-text="暂无知识节点数据"
      >
        <el-table-column prop="name" label="知识点标题">
          <template #default="scope">
            <div class="knowledge-title">
              <Icon icon="ep:document" class="knowledge-icon" />
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="话术内容" show-overflow-tooltip>
          <template #default="scope">
            <div class="content-cell">
              <AudioPlayered
                :url="scope.row.filePath"
                ref="audioPlays"
                v-if="scope.row.isVoice == 1"
                class="audio-player"
              />
              <div
                v-if="!scope.row.editing"
                @dblclick="handleCellDblClick(scope)"
                class="content-display"
              >
                <Icon icon="ep:edit-pen" class="edit-hint" />
                <span class="content-text">{{ scope.row.content }}</span>
              </div>
              <el-input
                v-else
                v-model="scope.row.content"
                @keyup.enter="handleCellEnter(scope)"
                @blur="handleCellBlur(scope)"
                ref="inputRef"
                class="content-input"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200px">
          <template #default="scope">
            <div class="table-actions">
              <el-upload
                :show-file-list="false"
                :multiple="false"
                ref="uploadRef"
                class="upload-component"
                accept="audio/*,.wav,.mp3,.m4a"
                :auto-upload="false"
                :on-change="(file, fileList) => handlePreview2(file, fileList, scope.row.id)"
                :limit="1"
              >
                <template #trigger>
                  <el-button type="primary" size="small" class="upload-btn">
                    <Icon icon="ep:upload" class="btn-icon" />
                    上传语音
                  </el-button>
                </template>
              </el-upload>

              <el-button
                type="success"
                :disabled="loading2"
                text
                @click="synthesis_audio2(scope)"
                class="synthesis-link"
              >
                <Icon icon="ep:magic-stick" class="btn-icon" />
                合成音
              </el-button>

              <el-button type="danger" text @click="del_audio2(scope.row)" class="delete-link">
                <Icon icon="ep:delete" class="btn-icon" />
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 隐藏的音频播放器 -->
    <audio controls ref="audioRef" style="display: none">
      <source :src="recordUrl" type="audio/mpeg" />
      您的浏览器不支持音频播放
    </audio>
  </div>
</template>

<script setup>
import {
  ivrVoiceAudition,
  createVoiceList,
  ivrContentList,
  delVoiceList,
  delVoiceByNodeId,
  createVoiceByNodeId,
  knowledgeIssueVoiceListCreate,
  KnowledgeIssueByFlowId,
  delKnowledgeIssueVoiceByFlowId,
  delKnowledgeIssueVoiceById,
  knowledgeIssueVoiceByIdCreate,
  updateKnowledgeTxt,
  upDateIvrContentByNodeId,
  updateIvrRobot
} from '@/api/call/ivr/index.ts'
import * as VoiceApi from '@/api/call/voiceManagement'
import { VideoPlay, VideoPause, Delete, InfoFilled } from '@element-plus/icons-vue'
import AudioPlayered from './audioPlayered.vue'
import { useIvrStore } from '@/store/modules/ivr'

defineOptions({ name: 'SoundRecording' })

const useStore = useIvrStore()
const props = defineProps({
  ivrId: String,
  groupId: String
})

const timbreList = ref([])
const formData = reactive({
  mode: 'polyphonic',
  voiceType: '',
  timbreType: 1,
  content: '嗯，好的。要不我加一下您的微信，你看可以吗？',
  volume: 50,
  speed: 10,
  pitch: 50
})

const loading_btn = ref(false)
const activeName = ref('1')
const nodes_value = ref([])

const setType = () => {
  const findItem = timbreList.value.find((item) => item.timbreId == formData.voiceType)
  formData.timbreType = findItem.type
  if (formData.timbreType == 2) {
    formData.volume = 50
    formData.speed = 10
  } else {
    formData.volume = 50
    formData.speed = 10
  }
}

// 1.0 创建流程节点列表
const create_process_nodes = async () => {
  try {
    loading_btn.value = true
    const data = await createVoiceList({
      timbreType: formData.timbreType,
      flowId: props.ivrId,
      voiceType: formData.voiceType,
      speed: formData.speed,
      volume: formData.volume,
      pitch: formData.pitch
    })
    get_process_nodes()
    loading_btn.value = false
  } catch {
    loading_btn.value = false
  }
}

// 1.1流程节点列表
const get_process_nodes = async () => {
  const data = await ivrContentList({
    flowId: props.ivrId
  })
  data.forEach((item) => {
    item.editing = false
    item.loading = false
  })
  nodes_value.value = data
}

const loading0 = ref(false)
// 1.2合成音
const synthesis_audio = async (scope) => {
  try {
    loading0.value = true
    const data = await createVoiceByNodeId({
      timbreType: formData.timbreType,
      flowId: props.ivrId,
      voiceType: formData.voiceType,
      speed: formData.speed,
      volume: formData.volume,
      pitch: formData.pitch,
      nodeId: scope.row.id
    })
    ElMessage.success('操作成功')
    get_process_nodes()
    loading0.value = false
  } catch {
    loading0.value = false
  }
}

// 1.3删除
const del_audio = async (item) => {
  await ElMessageBox.confirm('确定要清除选中的合成音?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await delVoiceByNodeId({
    flowId: props.ivrId,
    nodeId: item.id
  })
  ElMessage.success('操作成功')
  get_process_nodes()
}

// 1.4 全部删除
const clearAll = async () => {
  await ElMessageBox.confirm('确定要清除全部录音吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await delVoiceList({ flowId: props.ivrId })
  ElMessage.success('操作成功')
  get_process_nodes()
}

// 2.0 创建知识库列表
const create_know_nodes = async () => {
  try {
    loading_btn.value = true
    const data = await knowledgeIssueVoiceListCreate({
      timbreType: formData.timbreType,
      flowId: props.ivrId,
      voiceType: formData.voiceType,
      speed: formData.speed,
      volume: formData.volume,
      pitch: formData.pitch
    })
    get_know_nodes()
    loading_btn.value = false
  } catch {
    loading_btn.value = false
  }
}

// 2.1 获取列表
const get_know_nodes = async () => {
  const data = await KnowledgeIssueByFlowId({
    flowId: props.ivrId
  })
  if (data) {
    data.forEach((item) => {
      item.editing = false
      item.loading = false
    })
    nodes_value.value = data
  } else {
    nodes_value.value = []
  }
}

// 2.2
const handleClick = (val) => {
  if (val.index == 0) {
    get_process_nodes()
  } else {
    get_know_nodes()
  }
}

const loading2 = ref(false)
// 2.2合成音
const synthesis_audio2 = async (scope) => {
  try {
    loading2.value = true
    await knowledgeIssueVoiceByIdCreate({
      timbreType: formData.timbreType,
      flowId: props.ivrId,
      voiceType: formData.voiceType,
      speed: formData.speed,
      volume: formData.volume,
      pitch: formData.pitch,
      id: scope.row.id
    })
    ElMessage.success('操作成功')
    get_know_nodes()
    loading2.value = false
  } catch {
    loading2.value = false
  }
}

// 2.3删除
const del_audio2 = async (item) => {
  await ElMessageBox.confirm('确定要清除选中的合成音?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await delKnowledgeIssueVoiceById({
    flowId: props.ivrId,
    id: item.id
  })
  ElMessage.success('操作成功')
  get_know_nodes()
}

// 2.4 全部删除
const clearAll2 = async () => {
  await ElMessageBox.confirm('确定要清除全部录音吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await delKnowledgeIssueVoiceByFlowId({ flowId: props.ivrId })
  ElMessage.success('操作成功')
  get_know_nodes()
}

watch(
  () => props.ivrId,
  (val) => {
    if (val) {
      get_process_nodes()
      getTimbre()
    }
  },
  { immediate: true, deep: true }
)

// 0.合成
const synthesis = async () => {
  if (activeName.value == '1') {
    create_process_nodes()
  } else {
    create_know_nodes()
  }
}

const updateId = ref('')
// 音色列表
const getTimbre = async () => {
  timbreList.value = await VoiceApi.getTimbre()
  const data = await VoiceApi.getByFlowId({ flowId: props.ivrId })
  if (data) {
    updateId.value = data.id
    formData.voiceType = data.voiceType
    formData.timbreType = 2
    formData.volume = data.volumeRatio
    formData.speed = data.speedRatio
  } else {
    updateId.value = null
    if (timbreList.value.length) {
      formData.voiceType = timbreList.value[0].timbreId
      formData.timbreType = timbreList.value[0].type
    }
  }
}

const loading = ref(false)
const recordUrl = ref('http://scrmextend.bigopen.cn:8082/uploads/tts/20250618/tts68525bd114f69.wav')

const audioRef = ref(null)
// 播放语音
const trial_listening = async () => {
  try {
    loading.value = true
    const data = await ivrVoiceAudition(formData)
    if (data.filePath) {
      playAudio(data.filePath)
    }
  } finally {
    loading.value = false
  }
}

//暂停语音
const stop_listening = () => {
  if (!audioRef.value.paused) {
    audioRef.value.pause()
  }
}

const isStart = ref(false)
const playAudio = async (url) => {
  recordUrl.value = null
  await nextTick()

  recordUrl.value = url
  await nextTick()

  audioRef.value.load()
  audioRef.value.oncanplay = () => {
    audioRef.value.play().catch((e) => {
      ElMessage.error(`播放失败: ${e.message}`)
    })
  }
  audioRef.value.onplay = () => {
    isStart.value = true
  }
  audioRef.value.onpause = () => {
    isStart.value = false
  }
  audioRef.value.onended = () => {
    isStart.value = false
  }
}

const uploadRef = ref(null)
const handlePreview = async (file, fileList, id) => {
  try {
    const binaryFile = file.raw
    const formData = new FormData()
    formData.append('file', binaryFile)
    formData.append('flowId', props.ivrId)
    formData.append('nodeId', id)
    formData.append('timbreType', 2)
    await VoiceApi.createVoiceByNodeIdManual(formData)
    ElMessage.success('上传成功')
    uploadRef.value.clearFiles()
    get_process_nodes()
  } catch {
    uploadRef.value.clearFiles()
  }
}

const handlePreview2 = async (file, fileList, id) => {
  try {
    const binaryFile = file.raw
    const formData = new FormData()
    formData.append('file', binaryFile)
    formData.append('id', id)
    await VoiceApi.knowledgeIssueVoiceByIdCreateManual(formData)
    ElMessage.success('上传成功')
    get_know_nodes()
    uploadRef.value.clearFiles()
  } catch {
    uploadRef.value.clearFiles()
  }
}

const inputRef = ref(null)

// 双击单元格进入编辑模式
const handleCellDblClick = (scope) => {
  scope.row.editing = true
  nextTick(() => {
    inputRef.value?.focus()
  })
}

// 回车保存
const handleCellEnter = (scope) => {
  saveContent(scope)
}

// 失去焦点保存
const handleCellBlur = (scope) => {
  saveContent(scope)
}

// 保存内容的方法
const saveContent = async (scope) => {
  scope.row.editing = false
  if (activeName.value == '1') {
    await upDateIvrContentByNodeId({
      flowId: props.ivrId,
      nodeId: scope.row.id,
      content: scope.row.content
    })
  } else {
    await updateKnowledgeTxt({
      id: scope.row.id,
      recordDescription: scope.row.content
    })
  }
  ElMessage.success('修改成功')
  useStore.setRefreshOption(true)
  if (activeName.value == '1') {
    get_process_nodes()
  } else {
    get_know_nodes()
  }
}

const loading_ing = ref(false)
const submit = async () => {
  loading_ing.value = true
  try {
    await updateIvrRobot({
      id: updateId.value,
      flowId: props.ivrId,
      timbreId: formData.timbreType,
      voiceType: formData.voiceType,
      volumeRatio: formData.volume,
      speedRatio: formData.speed
    })
    ElMessage.success('保存成功')
    loading_ing.value = false
  } catch {
    loading_ing.value = false
  }
}
</script>

<style lang="scss" scoped>
.sound-recording-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #97a5e2 0%, #7db5db 100%);
  border-radius: 16px;
  padding: 12px 24px;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
  }
}

.header-content {
  position: relative;
  z-index: 1;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  backdrop-filter: blur(10px);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.page-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* 配置区域 */
.config-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.config-card {
  padding: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0, 82, 204, 0.1);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.config-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 0;

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
  }
}

.radio-group {
  display: flex;
  gap: 16px;
}

.radio-item {
  margin: 0;

  :deep(.el-radio__label) {
    padding: 0;
  }
}

.radio-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;

  &:hover {
    border-color: #0052cc;
    background: rgba(0, 82, 204, 0.02);
  }
}

.radio-icon {
  font-size: 16px;
  color: #6b7280;
}

.voice-config {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-select {
  width: 300px;

  :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

.voice-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.control-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.control-btn {
  border-radius: 8px;
  padding: 8px 12px;

  &.play-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
  }

  &.pause-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
  }
}

.voice-text {
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.params-section {
  background: rgba(0, 82, 204, 0.02);
  border-radius: 8px;
  padding: 16px;
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.param-item {
  margin-bottom: 0;
}

.param-input {
  width: 100%;

  :deep(.el-input__wrapper) {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 82, 204, 0.1);
}

.action-btn {
  border-radius: 8px;
  padding: 10px 20px;

  .btn-icon {
    margin-right: 6px;
  }

  &.synthesis-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
  }

  &.save-btn {
    background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
    border: none;
  }
}

/* 标签页区域 */
.tabs-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.recording-tabs {
  :deep(.el-tabs__header) {
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.02) 0%, transparent 100%);
    margin: 0;
    padding: 24px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    background: rgba(0, 82, 204, 0.1);
  }

  :deep(.el-tabs__active-bar) {
    background: #0052cc;
  }

  :deep(.el-tabs__item) {
    padding: 16px 0;

    &.is-active {
      color: #0052cc;
    }
  }
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-icon {
  font-size: 16px;
}

/* 操作栏 */
.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.operation-tip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tip-icon {
  color: #f59e0b;
  font-size: 16px;
}

.tip-text {
  font-size: 14px;
  color: #6b7280;
}

.operation-actions {
  display: flex;
  gap: 12px;
}

.clear-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  border-radius: 8px;

  .btn-icon {
    margin-right: 6px;
  }
}

/* 表格区域 */
.table-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  padding: 24px;
}

.recording-table {
  :deep(.el-table__header) {
    background: rgba(0, 82, 204, 0.02);
  }

  :deep(.el-table__header th) {
    background: transparent;
    border-bottom: 1px solid rgba(0, 82, 204, 0.1);
    color: #374151;
    font-weight: 600;
  }

  :deep(.el-table__body tr:hover) {
    background: rgba(0, 82, 204, 0.02);
  }

  :deep(.el-table__body td) {
    border-bottom: 1px solid rgba(0, 82, 204, 0.05);
  }
}

.node-name,
.knowledge-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-icon,
.knowledge-icon {
  color: #0052cc;
  font-size: 14px;
}

.content-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audio-player {
  margin-bottom: 8px;
}

.content-display {
  position: relative;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 82, 204, 0.05);

    .edit-hint {
      opacity: 1;
    }
  }
}

.edit-hint {
  position: absolute;
  top: 4px;
  right: 4px;
  color: #6b7280;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.content-text {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

.content-input {
  :deep(.el-input__wrapper) {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.1);
  }
}

.table-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.upload-component {
  width: 100%;
}

.upload-btn {
  width: 100%;
  border-radius: 6px;

  .btn-icon {
    margin-right: 4px;
  }
}

.synthesis-link,
.delete-link {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;

  .btn-icon {
    margin-right: 4px;
    font-size: 12px;
  }
}

.synthesis-link {
  color: #10b981;

  &:hover {
    background: rgba(16, 185, 129, 0.1);
  }
}

.delete-link {
  color: #ef4444;

  &:hover {
    background: rgba(239, 68, 68, 0.1);
  }
}

/* 响应式设计 - H5兼容 */
@media (max-width: 1200px) {
  .params-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sound-recording-container {
    padding: 12px;
    gap: 16px;
  }

  .page-header {
    padding: 20px;
  }

  .header-left {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .config-card {
    padding: 16px;
  }

  .voice-config {
    gap: 12px;
  }

  .voice-select {
    width: 100%;
  }

  .voice-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .params-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .action-btn {
    width: 100%;
  }

  .operation-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .operation-actions {
    justify-content: center;
  }

  .table-section {
    padding: 16px;
  }

  .table-actions {
    gap: 6px;
  }

  .recording-table {
    :deep(.el-table__body) {
      font-size: 13px;
    }
  }
}

@media (max-width: 480px) {
  .sound-recording-container {
    padding: 8px;
  }

  .page-header {
    padding: 16px;
  }

  .page-title {
    font-size: 20px;
  }

  .config-card {
    padding: 12px;
  }

  .table-section {
    padding: 12px;
  }

  .voice-text {
    max-width: 200px;
  }

  .control-btn {
    padding: 6px 10px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .sound-recording-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .config-section,
  .tabs-section,
  .operation-bar,
  .table-section {
    background: rgba(30, 41, 59, 0.95);
  }

  .page-title {
    color: #f9fafb;
  }

  .card-title {
    color: #f9fafb;
  }

  .control-label,
  .content-text {
    color: #e5e7eb;
  }

  .tip-text {
    color: #d1d5db;
  }

  .voice-text {
    color: #d1d5db;
  }
}
</style>
